<script src="./script.js"></script>
<style src="./style.css"></style>
<template>
  <div class="app-container">

    <div class="filter-container">
      <div>
        <el-input v-model="listQuery.keyword" class="filter-item" placeholder="编号 | 买家 | 微信 | 电话 | 快递单号 | 备注" clearable style="width:420px;" />
        <el-select v-model="listQuery.state" class="filter-item" placeholder="订单状态" style="width:130px" @change="handleSearch">
          <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>

        <el-select v-model="listQuery.is_printed" placeholder="打印状态" class="filter-item" style="width: 110px" @change="handleSearch">
          <el-option v-for="item in printed_options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>

        <el-date-picker
          v-model="datetime"
          range-separator="至"
          start-placeholder="下单开始时间"
          end-placeholder="下单结束时间"
          type="daterange"
          :picker-options="pickerOptions"
          :default-time="['00:00:00']"
          value-format="yyyy-MM-dd"
          class="filter-item"
          @change="handleSearch"
        />

        <el-input v-model="listQuery.weight_min" class="filter-item" placeholder="最小重量" clearable style="width:110px;" />

        <el-input v-model="listQuery.weight_max" class="filter-item" placeholder="最大重量" clearable style="width:110px;" />

        <el-input v-model="listQuery.amount_min" class="filter-item" placeholder="最小金额" clearable style="width:110px;" />

        <el-input v-model="listQuery.amount_max" class="filter-item" placeholder="最大金额" clearable style="width:110px;" />

        <el-cascader
          placeholder="收货地区"
          class="filter-item"
          :options="area_options"
          v-model="selectedOptions"
          @change="handleAreaChangeSearch">
        </el-cascader>

        <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>

        <el-button class="filter-item" style="margin-left: 10px;" type="success" @click="printBatch">打印#</el-button>

        <el-button class="filter-item" style="margin-left: 10px;" type="success" @click="pickBatch">拣货#</el-button>

        <el-button class="filter-item" style="margin-left: 10px;" type="success" @click="pick_print">拣货并打印#</el-button>

        <el-select v-model="listQuery.orderby" class="filter-item" placeholder="排序" style="width:130px;margin-left:20px;" @change="handleSearch">
          <el-option v-for="item in orderbyOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>

      </div>
    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      ref="multipleTable"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        align="center"
        type="selection"
        width="40">
      </el-table-column>
      <el-table-column label="订单编号" prop="id" align="center" width="120">
        <template slot-scope="{row}">
          <el-link type="primary" @click="getDetail(row)">{{ row.id }}</el-link>
          <div><a :href="'#' + row.id" @click="print(row.id)">针打打印</a></div>
          <div style="margin-top:10px;margin-bottom:10px;"><el-link type="primary" @click="printOnline(row.id)">热敏打印</el-link></div>
          <div><el-link type="danger">打印次数：{{ row.print_num }}</el-link></div>
          <div style="margin-top:10px;margin-bottom:10px;"><el-link type="primary" @click="editRemark(row.id,row.remark)">备注订单</el-link></div>
        </template>
      </el-table-column>
      <el-table-column label="买家名称" width="140px">
        <template slot-scope="{row}">
          <div v-if="row.owner.profile.nick_name !== '' && row.owner.profile.nick_name !== '微信用户'">
            <el-image
              style="width: 40px; height: 40px;"
              :src="row.owner.profile.avatar_url"
            />
            <div>{{ row.owner.profile.nick_name }}</div>
            <el-link type="danger" v-if="row.owner.enrollment">{{ row.owner.enrollment.name }}</el-link>
          </div>
          <div v-if="row.owner.profile.nick_name === '' || row.owner.profile.nick_name === '微信用户'">
            <el-image
              style="width: 40px; height: 40px;"
              src="https://cdn.west.qianqianying.com/mph/user.jpg"
            />
            <div>未授权</div>
            <el-link type="danger">{{ row.owner.enrollment.name }}</el-link>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="采购列表">
        <template slot-scope="{row}">
          <div v-for="item in row.items" :key="item.id">
            <el-image
              style="width: 30px; height: 30px;"
              :src="item.product.image_url"
            />
            <span>{{ item.product.product_name + ' ' + item.product.item_name }}</span>
            <span style="color:red;margin-left:10px;">x{{ item.quantity }}</span>
            <span style="color:red;margin-left:10px;">小计￥{{ item.subtotal }}</span>
          </div>
          <div style="margin-top:10px;">
            <el-tag size="medium" effect="dark" type="danger" v-if="row.coupon">优惠券： -{{ row.coupon.amount }}</el-tag>
            <el-tag size="medium" effect="dark">订单实付： {{ row.amount }}</el-tag>
            <el-tag size="medium">预估重量： {{ row.weight }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="收货地址" width="154">
        <template slot-scope="{row}">
          <div style="color:rgb(64, 158, 255)">{{ row.shipping.consignee }}  {{ row.shipping.mobile }}</div>
          <div>{{ row.shipping.district + row.shipping.address }}</div>
          <div v-if="row.shipping.express">
            <div><el-tag type="danger" size="mini" effect="dark">{{ row.shipping.express }}</el-tag></div>
            <div>{{ row.shipping.express_no }}</div>
          </div>
          <div style="margin-top:10px;">客户备注：{{ row.note }}</div>
          <div style="margin-top:10px;">后台备注：{{ row.remark }}</div>
          <div style="margin-top:10px;">用户备注：{{ row.owner.note }}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作时间" align="center" width="120">
        <template slot-scope="{row}">
          <div><el-tag type="" size="mini" effect="plain">下单时间</el-tag></div>
          <div>{{ row.created_at | parseTime('{y}年{m}月{d}日 {h}:{i}:{s}') }}</div>

          <div v-if="row.transaction.paid_at"><el-tag type="success" size="mini" effect="dark">付款时间</el-tag></div>
          <div v-if="row.transaction.paid_at">{{ row.transaction.paid_at | parseTime('{y}年{m}月{d}日 {h}:{i}:{s}') }}</div>

          <div v-if="row.shipping.receipted_at"><el-tag type="danger" size="mini" effect="dark">确认收货</el-tag></div>
          <div v-if="row.shipping.receipted_at">{{ row.shipping.receipted_at | parseTime('{y}年{m}月{d}日 {h}:{i}:{s}') }}</div>

        </template>
      </el-table-column>
      <el-table-column label="状态" width="80px" align="center">
        <template slot-scope="{row}">
          <el-tag v-if="row.state === 'PAYING'" type="info" effect="dark">待支付</el-tag>
          <el-tag v-if="row.state === 'SHIPPING'" type="warning" effect="dark">待发货</el-tag>
          <el-tag v-if="row.state === 'SHIPPED'" type="primary" effect="dark">待收货</el-tag>
          <el-tag v-if="row.state === 'DELIVERED'" type="success" effect="dark">已收货</el-tag>
          <el-tag v-if="row.state === 'FINISHED'" type="success" effect="dark">已完成</el-tag>
          <el-tag v-if="row.state === 'CLOSED'" type="danger" effect="dark">已关闭</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="{row}">
          <el-button v-if="row.state === 'PAYING'" type="danger" size="mini" @click="cancel(row.id)">取消</el-button>
          <el-button v-if="row.state === 'SHIPPING'" type="warning" size="mini" @click="getDetail(row)">发货</el-button>
          <el-button v-if="row.state === 'SHIPPING'" type="danger" size="mini" @click="cancel(row.id)">取消</el-button>
          <div v-if="row.state === 'PAYING' || row.state === 'SHIPPING'" style="margin-top:10px">
            <el-button type="info" size="mini" @click="cancel2(row.id)">取消</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <pagination :page-sizes="[10,20,40]" v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

    <el-drawer
      direction="rtl"
      title="订单详情"
      size="80%"
      :visible.sync="orderVisible"
    >
      <div v-if="dto" class="container">
        <el-row :gutter="10" type="flex" align="middle">
          <el-col :span="3"><div class="label">订单编号：</div></el-col>
          <el-col :span="9"><div class="val">{{ dto.id }}</div></el-col>
          <el-col :span="3"><div class="label">订单总额：</div></el-col>
          <el-col :span="3"><div class="val">{{ dto.amount }}</div></el-col>
          <el-col :span="3"><div class="label">状态：</div></el-col>
          <el-col :span="3">
            <div class="val">
              <el-tag v-if="dto.state === 'PAYING'" type="info" effect="dark">待支付</el-tag>
              <el-tag v-if="dto.state === 'SHIPPING'" type="warning" effect="dark">待发货</el-tag>
              <el-tag v-if="dto.state === 'SHIPPED'" type="primary" effect="dark">待收货</el-tag>
              <el-tag v-if="dto.state === 'DELIVERED'" type="success" effect="dark">已收货</el-tag>
              <el-tag v-if="dto.state === 'FINISHED'" type="success" effect="dark">已完成</el-tag>
              <el-tag v-if="dto.state === 'CLOSED'" type="danger" effect="dark">已关闭</el-tag>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="10" type="flex" align="middle">
          <el-col :span="3"><div class="label">买家信息：</div></el-col>
          <el-col :span="9">
            <div class="val">
              <el-avatar :size="50" :src="dto.owner.profile.avatar_url" />
              <span>{{ dto.owner.profile.nick_name }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="10" type="flex" align="middle">
          <el-col :span="3"><div class="label">收货地址：</div></el-col>
          <el-col :span="21">
            <div class="val">
              {{ dto.shipping.district + dto.shipping.address }}
              <span>{{ dto.shipping.consignee }}</span>
              <span>{{ dto.shipping.mobile }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row v-if="dto.shipping.shipped_at" :gutter="10" type="flex" align="middle">
          <el-col :span="3"><div class="label">快递信息：</div></el-col>
          <el-col :span="21">
            <div class="val">
              {{ dto.shipping.express }}
              <span>{{ dto.shipping.express_no }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="10" type="flex" align="top">
          <el-col :span="3"><div class="label">采购列表：</div></el-col>
          <el-col :span="21">
            <div v-for="item in dto.items" :key="item.id" class="product-item">
              <el-image
                :src="item.product.image_url"
                :lazy="true"
                style="width:50px;height:50px;margin-right:10px;"
              />
              <span>{{ item.product.product_name }}</span>
              <span>{{ item.product.item_name }}</span>
              <span class="quantity">x{{ item.quantity }}</span>
              <span class="subtotal">小计：{{ item.subtotal }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="10" type="flex" align="top">
          <el-col :span="3"><div class="label">费用明细：</div></el-col>
          <el-col :span="21">
            <div class="fee-detail">
              <div class="line">
                <span>商品总额</span>
                <span>{{ dto.total }}</span>
              </div>
              <div class="line">
                <span>运费</span>
                <span>{{ dto.shipping.postage }}</span>
              </div>
              <div v-if="false" class="line">
                <span>优惠券</span>
                <span>-10.00</span>
              </div>
              <div class="line">
                <span>订单总额</span>
                <span>{{ dto.amount }}</span>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="10" type="flex" align="top">
          <el-col :span="3"><div class="label">时间信息：</div></el-col>
          <el-col :span="21">
            <div class="fee-detail">
              <div class="line">
                <span>下单时间</span>
                <span>{{ dto.created_at }}</span>
              </div>
              <div class="line">
                <span>付款时间</span>
                <span v-if="dto.transaction.paid_at">{{ dto.transaction.paid_at }}</span>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="10" type="flex" align="middle">
          <el-col :span="3"><div class="label">订单操作：</div></el-col>
          <el-col :span="21">
            <div v-if="dto.state === 'SHIPPING'" class="express-form">
              <el-select v-model="value" placeholder="请选择快递公司">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <el-input
                v-model="express_no"
                style="width:400px;margin-left:10px"
                placeholder="请输入运单号"
              >
                <template slot="prepend">运单号</template>
              </el-input>
            </div>
            <div>
              <el-button v-if="dto.state === 'SHIPPING'" type="success" @click="ship">发货</el-button>
              <el-button
                v-if="dto.state === 'SHIPPING' || dto.state === 'PAYING'"
                type="danger"
                @click="cancel"
              >
                取消订单
              </el-button>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-drawer>

  </div>
</template>
